<template>
  <a-drawer
    title="导入商品"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="importExcelVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <div class="option-area">
      <a-upload
        class="upload-area"
        :fileList="fileList"
        :remove="handleRemove"
        :disabled="fileList.length === 1"
        :beforeUpload="beforeUpload">
        <a-button>
          <a-icon type="upload"/>
          选择.xlsx文件
        </a-button>
      </a-upload>

    </div>
    <div class="button-area">

      <a-button
        @click="handleUpload"
        :disabled="fileList.length === 0"
        :loading="uploading">
        {{uploading ? '导入中' : '导入Excel' }}
      </a-button>
    </div>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 3},
    wrapperCol: {span: 18}
  }
  export default {
    name: 'ImportExcelForm',
    props: {
      importExcelVisiable: {
        default: false
      }
    },
    data() {
      return {
        fileList: [],
        importData: [],
        times: '',//用来计算耗时
        errors: [],
        uploading: false,
        loading: false
      }
    },
    methods: {
      reset() {
        this.loading = false
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleRemove(file) {
        if (this.uploading) {
          this.$message.warning('文件导入中，请勿删除')
          return
        }
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleUpload() {
        const {fileList} = this
        const formData = new FormData()
        formData.append('file', fileList[0])
        this.uploading = true
        this.$upload('goods/import', formData).then(r => {
          let data = r.data.data
          console.info("data", data);
        });
        /*this.$upload('test/import', formData).then((r) => {
          let data = r.data.data
          if (data.data.length) {
            this.fetch()
          }
          this.importData = data.data
          this.errors = data.error
          this.times = data.time / 1000
          this.uploading = false
          this.fileList = []
          this.importResultVisible = true
        }).catch((r) => {
          console.error(r)
          this.uploading = false
          this.fileList = []
        })*/
      },
      handleSubmit() {

      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/less/Common";

  .option-area {
    display: inline-block;
    width: 100%;
    padding: 0 .9rem;
    margin: .5rem 0;
  }

  .upload-area {
    display: inline;
    float: left;
    width: 50%
  }

  .button-area {
    margin-left: 1rem;
    display: inline;
    float: right;
    width: 30%;
  }

</style>

